<template>
    <div class="weui-cells" v-if="changeList && changeList.length">
        <table class="three-column-table">  
            <thead>  
                <tr>  
                    <th>调动前部门</th>  
                    <th>调动后部门</th>  
                    <th>调动日期</th>  
                </tr>  
            </thead>  
            <tbody>  
                <tr v-for="(index,v) in changeList" :key="index">  
                    <td>{{v.current_group_name}}</td>  
                    <td>{{v.target_group_name}}</td>  
                    <td>{{v.create_at}}</td>   
                </tr>    
            </tbody>  
        </table> 
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import cache from 'gapi/cache'

    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {
        },
        data: function(){
            return{
                changeList:[]
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                cache.getMemoryCache('KqCacheMessge',(data)=>{
                    this.changeList = data.changeList
                })  
            }
        },
        created(){
            this.init();
        }

    }
</script>
<!-- <style src="../../node_modules/weui/dist/style/weui.css"></style> -->
<style>
.three-column-table {  
    width: 100%;  
    border-collapse: collapse;  
    margin: 0px 0 20px;  
    table-layout: fixed; /* 确保表格布局是固定的，这样我们可以为列设置固定宽度 */  
}  
  
.three-column-table th, .three-column-table td {  
    border: 1px solid #ddd;  
    padding: 8px;  
    text-align: left;  
    word-wrap: break-word; /* 确保长单词或URL可以自动换行 */  
}  
  
.three-column-table th {  
    background-color: #f2f2f2;  
}  
  
.three-column-table td:first-child {  
    /* 第一列（左侧），可以根据需要调整宽度或保持自动 */  
    
}  
  
.three-column-table td:nth-child(2) {  
    width: 200px; /* 中间一列固定宽度 */  
    white-space: normal; /* 允许内容自动换行 */  
    word-break: break-all; /* 确保长单词或无空格文本也能换行 */  
}  
  
.three-column-table td:last-child {  
    /* 第三列（右侧），可以根据需要调整宽度或保持自动 */  
    width: 200px; /* 中间一列固定宽度 */  
    white-space: normal; /* 允许内容自动换行 */  
    word-break: break-all; /* 确保长单词或无空格文本也能换行 */
}  
  
.three-column-table tr:nth-child(even) {  
    background-color: #f9f9f9;  
}  
  
.three-column-table tr:hover {  
    background-color: #f1f1f1;  
}
</style>